body {
  background: linear-gradient(90deg, hsl(199, 98%, 50%), hsl(199, 98%, 38%));
  overflow: hidden;
}

div {
  position: relative;
  width: 30vmin;
  height: 30vmin;
  background: #fff;
  margin: 30vmin auto;

  &::after,
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }

  &::before {
    transform-origin: 0 50%;
    transform: translate(100%, 0) skewY(45deg) scaleX(.6);
    background: linear-gradient(90deg, rgba(0, 0, 0,.3), transparent);
  }

  &::after {
    transform-origin: 0 0;
    transform: translate(0, 100%) skewX(45deg) scaleY(.6);
    background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
  }
}